<script setup>
import { ref } from 'vue';

const changebtn = ref(0)
</script>

<template>
    <!-- 选项卡的外部容器 -->
    <div class="tab-wrapper">
        <!-- 选项卡的按钮容器 -->
        <div class="button-wrapper">
            <!-- 定义的两个按钮 -->
            <div @click="changebtn = 0" class="button" :class="{ active: changebtn === 0 }">热门歌手</div>
            <div @click="changebtn = 1" class="button" :class="{ active: changebtn === 1 }">热门歌曲</div>
        </div>
        <!-- 选项卡的主题 -->
        <div class="main">
            <!-- 
        changebtn === 0 显示明星
        changebtn === 1 显示歌曲

            v-show 指令， 用来设置内容是否显示
            v-show是通过display来设置元素是否显示

           -->
            <div v-show="changebtn === 0">
                <!-- 明星 -->
                <slot name="0"></slot>
                
            </div>
            <div v-show="changebtn === 1">
                <!--歌曲 -->
                <slot name="1"></slot>
               
            </div>

        </div>
    </div>
</template>

<style scoped>
.tab-wrapper {
  width: 400px;
  padding: 10px;
  background-color: rgb(3, 0, 204);
  box-sizing: border-box;
}

.button-wrapper {
  display: flex;
  border-radius: 5px;
  /* 覆盖 */
  overflow: hidden;
  /* 将光标变成小手 */
  cursor: pointer;

}


.button:not(.active):hover {
  color: #f00;
}

.button {
  font-size: 20px;
  background-color: #fff;
  flex: auto;
  padding: 5px 0;
  text-align: center;
  transition: 0.4s;
}

.active {
  background-color: #f00;
  color: #fff;
}




</style>